<template>
	<view class="flex-row p-20 animate__animated animate__fadeInLeft animate__fast">
		<view>
			<image class="img-header" :src="item.userPic" mode="widthFix" lazy-load></image>
		</view>
		<view class="flex-1 ml-10 border-bottom border-info pb-10">
			<view class="flex-row j-sb a-center">
				<view class="row-center text-color3 font-30rpx">{{item.username}}
					<view class="iconfont iconxingbie-nan tag-age line-h-12" :class="[item.sex == 0 ? 'iconxingbie-nan' :'iconxingbie-nv']">{{item.age}}</view>
				</view>
				<view class="bg-info-light rounded-10 px-10" @click="follow">
					<view class="iconfont iconjia mr-10" v-show="!isFollow">关注</view>
				</view>
			</view>
			<view class="font-32 py-10 px-0">{{item.title}}</view>
			<view class="position-relative row-center">
				<image class="img-content" v-if="item.titlePic" :src="item.titlePic" mode="widthFix" lazy-load></image>
				<template v-if="item.video">
					<view class="icon-play iconfont iconbofang"></view>
					<view class="play-info">
						{{item.video.playNum}}次播放 {{item.video.playLong}}
					</view>
				</template>
				<!-- 分享 -->
				<view class="list-share flex-row" v-if="item.share">
					<image class="img-share" :src="item.share.titlePic" mode="widthFix" lazy-load></image>
					<view class="flex-1">{{item.share.title}}</view>
				</view>
			</view>
			<view class="flex-row j-sb text-info-dark">
				<view class="">{{item.path}}</view>
				<view class="row-center">
					<view class="row-center mr-20">
						<view class="iconfont iconfenxiang mr-10"></view>
						{{item.shareNUm}}
					</view>
					<view class="row-center mr-20">
						<view class="iconfont iconliaotian mr-10"></view>
						{{item.commentNum}}
					</view>
					<view class="row-center">
						<view class="iconfont iconthumbsup mr-10"></view>
						{{item.goodNum}}
					</view>
				</view>
			</view>
		</view>
		<!-- 轻提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	/*
	 * commonList 公共列表
	 * @description 用于动态页图文列表信息
	 * @author MrThinco
	 * @property {Object} item 列表信息
	 * @property {Number} index 索引
	 */
	export default {
		props:{
			item: Object,
			index: Number
		},
		data() {
			return {
				isFollow: this.item.isFollow
			}
		},
		methods: {
			follow() {
				this.isFollow = true;
				this.$refs.uToast.show({
					title: '您关注成功',
					position: 'top',
					type: 'success',
					icon: true,
					url:''
				});
			}
		}
	}
</script>

<style scoped>
.img-header {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}
	.img-content {
		width: 100%;
		border-radius: 20rpx;
	}
	.tag-age {
		background-color: map-get($behaviour-color,primary-dark);
		color: #FFFFFF;
		font-size: 24rpx;
		padding: 2rpx 10rpx;
		margin-left: 10rpx;
		border-radius: 20rpx;
	}
	.icon-play {
		position: absolute;
		font-size: 120rpx;
		color: #FFF;
	}
	.play-info {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		color: #FFF;
		background-color: rgba(153, 153, 153, 0.75);
		border-radius: 50rpx;
		padding: 0px 20rpx;
		font-size: 25;
	}
	.list-share {
		width: 100%;
		background: #EEEEEE;
		padding: 10rpx;
		border-radius: 10rpx;
	}
	.img-share {
		width: 200rpx;
		height: 200rpx;
		margin-right: 10rpx;
	}
</style>
